<template>
    <div class="section-wrap formwork">
        <div class="form-section">
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>项目名称</label>
                </div>
                <div class="newcompanyList approvehide">
                    {{dataList.ProjectName}}
                </div>
            </div>

            <div class="form-item form-item-style2">
                <div class="label-title">
                    <label>拆除部位</label>
                </div>
                <div>
                    <!-- <textarea class="areainfo"
                              v-model="dataList.DismantlingPart"
                              :disabled="isDisable"></textarea> -->
                    <p class="textarea">{{dataList.DismantlingPart}}</p>
                </div>
            </div>

            <div class="form-item form-item-style2">
                <div class="label-title">
                    <label>标高范围</label>
                </div>
                <div>
                    <!-- <textarea class="areainfo"
                              v-model="dataList.remark"
                              :disabled="isDisable"></textarea> -->
                    <p class="textarea">{{dataList.remark}}</p>
                </div>
            </div>

            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>作业开始日期</label>
                </div>
                <div class="newcompanyList approvehide">
                    {{dataList.StartDate | filterdata}}
                </div>
            </div>

            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>作业结束日期</label>
                </div>
                <div class="newcompanyList approvehide">
                    {{dataList.EndDate | filterdata}}
                </div>
            </div>

            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>混凝土养护是否合格</label>
                </div>
                <div class="select-section">
                    <div :class="{'active': spot}">
                        合格
                    </div>
                    <div :class="{'active': !spot}">
                        不合格
                    </div>
                </div>
            </div>

            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>同条件混凝土试块试压强度</label>
                </div>
                <div class="select-section">
                    <div :class="{'active': spot2}">
                        合格
                    </div>
                    <div :class="{'active': !spot2}">
                        不合格
                    </div>
                </div>
            </div>

            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>混凝土强度</label>
                </div>
                <div class="select-section">
                    <div :class="{'active': spot3}">
                        合格
                    </div>
                    <div :class="{'active': !spot3}">
                        不合格
                    </div>
                </div>
            </div>
        </div>

        <div class="form-section">
            <div class="saveFiretit">
                安全措施
            </div>

            <div class="saveChecklist"
                 v-for="(checkOne,index) in commonList">
                <input class="saveCheckInp"
                       type="checkbox"
                       disabled="false"
                       :class="{'checkedopt': checkStatusList.indexOf(checkOne)>=0}"
                       :checked="checkStatusList.indexOf(checkOne)>=0"
                       @click='checkedOne(checkOne)'>
                <span>{{checkOne}}</span>
            </div>

            <!-- <div class="form-item form-item-style2" v-if="syself">
                <div class="label-title">
                    <label>审批意见</label>
                </div>
                <div>
                    <x-textarea :placeholder="('请输入意见(自行换行)')" :max="2000" :height="60" v-model="ApproveRemark"></x-textarea>
                </div>
            </div> -->

            <!-- <div class="form-item form-item-style1" v-if="syself">
                <div class="label-title">
                    <label>审批结论</label>
                </div>
                <div class="select-section">
                    <div :class="{'active': ApproveResult}"
                         @click="ApproveResult=true">
                        通过
                    </div>
                    <div :class="{'active': !ApproveResult}"
                         @click="ApproveResult=false">
                        不通过
                    </div>
                </div>
            </div> -->

            <!-- 审批信息 -->
            <div class="approveBox"
                 v-if='approveStatus'>
                <div class="approveTit">审批信息</div>
                <div class="approveWrap"
                     v-if='dataList.ApproveInfo.length>0'
                     v-for="(item,index) in dataList.ApproveInfo"
                     :key="index">
                    <div class="form-item form-item-style2">
                        <div class="label-title">
                            <label>审批意见</label>
                        </div>
                        <div>
                            <!-- <textarea class="areainfo"
                                      height="500"
                                      placeholder="请输入审批意见"
                                      v-model="item.Remark"
                                      :disabled="isDisable"></textarea> -->
                            <p class="textarea">{{item.Remark}}</p>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>审批结论</label>
                        </div>
                        <div class="newcompanyList approvehide">
                            {{item.ApproveResult}}
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>审批人</label>
                        </div>
                        <div class="newcompanyList approvehide">
                            {{item.ApprovePersonName}}
                        </div>
                    </div>
                </div>
                <div class="approveContent"
                     v-if="syself">
                    <div class="form-item form-item-style2">
                        <div class="label-title">
                            <label>审批意见</label>
                        </div>
                        <div>
                            <textarea class="areainfo"
                                      height="500"
                                      placeholder="请输入审批意见"
                                      v-model="ApproveRemark"></textarea>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>审批结论</label>
                        </div>
                        <div class="select-section">
                            <div :class="{'active': ApproveResult}"
                                 @click="ApproveResult=true">
                                通过
                            </div>
                            <div :class="{'active': !ApproveResult}"
                                 @click="ApproveResult=false">
                                不通过
                            </div>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>审批人</label>
                        </div>
                        <div class="newcompanyList approvehide">
                            {{userInfo.username}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="btns"
                 v-if="syself">
                <button @click="toSubmit">提交</button>
            </div>
        </div>

        <myMenu></myMenu>
    </div>
</template>
<script>
import myMenu from '@/commonComponents/menu'
export default {
    components: {
        myMenu
    },
    data () {
        return {
            dataList: {
                ProjectName: '',//项目名称
                DeptName: '',//申请单位名称
                StartDate: this.getDate(),//动火开始日期
                EndDate: this.getDate(),//动火结束日期
                DismantlingPart: '',//拆除部位
                remark: '',//标高范围
                PlanText: '',//安全措施选择集合（字符串）
            },
            isDisable: true,
            spot: true,//混凝土是否合格
            spot2: true,
            spot3: true,
            ApproveRemark: '',//审批意见
            ApproveResult: true,//审批意见是否通过
            commonList: ['动火方案', '配备灭火器', '明确动火监护人', '动火点周围可燃材料已清理', '动火人配备安全防护用品(如防护罩、防护手套等）', '是否动火旁站监督'],//安全措施列表
            checkStatusList: [],//已选安全措施集合
            role: '',//检查单位  
            userId: '',
            tokenId: '',
            projectId: '',
            userInfo: '',
            syself: '',
            addFlag: true,//提交开关（避免多次提交）  
            approveStatus: false//是否展示审批信息       
        }
    },
    created () {
        this.userInfo = JSON.parse(localStorage.userInfo)
        this.userId = this.userInfo.userid;
        this.tokenId = this.userInfo.tokenId;
        this.projectId = this.userInfo.deptid;
        this.role = this.userInfo.departsir;
        // this.syself = this.rolecheck(); 
        this.getData()
    },
    filters: {
        filterdata (val) {
            if (!val) {
                return false;
            }
            return val.substring(0, 10);
        },
    },
    methods: {
        rolecheck () {
            //index==1  验证是否是项目施工员  index==2  验证是否是设备管理员  
            let arr = [];
            let flag = false;
            arr = this.userInfo.usermode.split(",");
            arr.forEach(
                (item, index) => {
                    if (item == "项目生产经理") {
                        flag = true;
                    }
                }
            )
            return flag;
        },
        //获取详情数据
        getData () {
            let that = this
            let param = {
                'allowPaging': true,
                'business': 'GetTemplateDismantlingJob',
                'data': {
                    "id": this.$route.query.id,
                },
                'pageIndex': 0,
                'pageSize': 20,
                "tokenId": 'CD9D3B5786AF0333B02C53F1A84C45B6',
                "userId": this.userId
            }
            this.$axiosAjax.getConfigJson(
                param
            ).then(
                (res) => {
                    // console.log(res)
                    that.dataList = res.data.data;
                    that.checkStatusList = that.dataList.PlanText.split(',')
                    that.spot = that.toBool(res.data.data.JobItem1)
                    that.spot2 = that.toBool(res.data.data.JobItem2)
                    that.spot3 = that.toBool(res.data.data.JobItem3)

                    that.syself = res.data.data.CanEdit
                    if (that.syself || res.data.data.ApproveInfo.length > 0) {
                        that.approveStatus = true
                    }
                }
            ).catch(response => {

            })
        },
        // 提交
        toSubmit () {
            if (!this.addFlag) {
                return false
            }
            this.addFlag = false
            this.$vux.loading.show({
                text: '正在提交中...'
            })
            let param = {
                'allowPaging': true,
                'business': 'TemplateDismantlingCheck',
                'data': {
                    id: this.$route.query.id, // String 动火作业ID
                    CheckResult: this.ApproveResult, // boolean	是否通过审核
                    ApproveRemark: this.ApproveRemark // String 审批人意见
                },
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': this.tokenId,
                'userId': this.userId
            }
            this.$vux.loading.show({
                text: '正在提交中...'
            })
            this.$axiosAjax.getConfigJson(
                param
            ).then(
                (res) => {
                    if (res.data.code == 0) {
                        this.$vux.toast.text('审核提交成功')
                        // this.$router.push({
                        //     path: '/workrisk'     
                        // })
                        this.$router.go(-1)
                    } else {
                        this.$vux.toast.text(res.data.info)
                        this.addFlag = true
                    }
                }
            ).catch(() => {
                this.addFlag = true
            })
        },
        //获取当前年月日
        getDate () {
            let nowDate = new Date();
            let date = {
                year: nowDate.getFullYear(),
                month: nowDate.getMonth() + 1,
                date: nowDate.getDate(),
            }
            if (date.month >= 0 && date.month < 10) {
                date.month = '0' + date.month
            }
            if (date.date >= 0 && date.date < 10) {
                date.date = '0' + date.date
            }
            let systemDate = date.year + '-' + date.month + '-' + date.date;
            return systemDate ? systemDate : ''
        },
        //安全措施多选
        checkedOne (val) {
            var idIndex = this.checkStatusList.indexOf(val)
            if (idIndex >= 0) {
                this.checkStatusList.splice(idIndex, 1)
            } else {
                this.checkStatusList.push(val)
            }
        },
        //字符串转化
        toStr (val) {
            if (val == true) {
                return '是'
            } else if (val == false) {
                return '否'
            } else {
                return '是'
            }
        },
        toBool (val) {
            if (val == '是') {
                return true
            } else if (val == '否') {
                return false
            } else {
                return true
            }
        }
    }
}
</script>
<style lang="less" scoped>
.right-select {
    font-size: 14px;
    color: #999;
}
.right-select > i {
    color: #999;
}
.btns .green {
    // background: #15bc84;
}
.newcompanyList {
    font-size: 14px;
    text-align: right;
    color: #999;
}
.saveFiretit {
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #efeff4;
    margin-left: 20px;
    color: #2269ff;
    font-size: 15px;
}
.saveChecklist {
    height: 55px;
    line-height: 55px;
    font-size: 13px;
    margin-left: 20px;
    padding-right: 20px;
    border-bottom: 1px solid #efeff4;
}
.saveCheckInp {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 9px;
    background: #fff url('../../../assets/hideManage/uncheckedicon.jpg')
        no-repeat 0 0;
    background-size: 15px 15px;
}
.saveCheckInp.checkedopt {
    background: #fff url('../../../assets/hideManage/checkedicon.jpg') no-repeat
        0 0;
    background-size: 15px 15px;
}
.select-section {
    display: flex;
    display: -webkit-flex;
    font-size: 14px;
}
.select-section div {
    padding-left: 26px;
    background: url(../../../../static/images/select.png) no-repeat left center;
    background-size: 17px 17px;
}
.select-section div:first-child {
    margin-right: 38px;
}
.select-section .active {
    background: url(../../../../static/images/selected.png) no-repeat left
        center;
    background-size: 17px 17px;
}
.formwork .form-item label {
    // width: 170px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
</style>
<style>
.formwork .vux-cell-value {
    color: #999;
}
.formwork .vux-x-textarea {
    width: 100%;
    border: 0 !important;
}
.formwork .form-item .textarea,
.formwork .form-item textarea {
    font-size: 14px;
    color: #999;
    font-family: '微软雅黑';
}
.formwork .areainfo {
    resize: none;
    min-height: 50px;
}
.approveBox {
    border-top: 10px solid #ebeef2;
}
.approveBox .approveTit {
    height: 55px;
    line-height: 55px;
    margin-left: 20px;
    font-size: 15px;
    color: #2269ff;
    border-bottom: 1px solid #efeff4;
}
</style>